<template>
  <div class="table-wrapper">
    <div class="table-header">
      <div class="title">{{ $t('workplace.teamList') }}</div>
    </div>
    <a-table
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      :loading="loading"
      :bordered="false"
      size="mini"
      @page-change="onPageChange"
    />
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { getUserList } from '@/api/dashboard';
import type { UserListRecord } from '@/api/dashboard';
import { Pagination } from '@/types/global';

export default {
  name: 'TeamList',
};
</script>

<script lang="ts" setup>
const { t } = useI18n();
const loading = ref(false);
const tableData = ref<UserListRecord[]>([]);

const basePagination: Pagination = {
  page: 1,
  limit: 10,
};
const pagination = ref({
  ...basePagination,
  total: 0,
});

const columns = [
  {
    title: '#',
    dataIndex: 'index',
    width: 80,
    align: 'center' as const,
    render: ({ rowIndex }) =>
      rowIndex + 1 + (pagination.value.page - 1) * pagination.value.limit,
  },
  {
    title: t('workplace.columns.memberName'),
    dataIndex: 'nickname',
    ellipsis: true,
    tooltip: true,
    width: 150,
  },
  {
    title: t('workplace.columns.memberMobile'),
    dataIndex: 'mobile',
    ellipsis: true,
    tooltip: true,
    width: 150,
  },
];

const fetchData = async () => {
  try {
    loading.value = true;
    const { data } = await getUserList({
      page: pagination.value.page,
      limit: pagination.value.limit,
    });
    
    tableData.value = data.data;
    pagination.value.total = data.total;
  } catch (error) {
    console.error('获取团队列表失败:', error);
  } finally {
    loading.value = false;
  }
};

const onPageChange = (page: number) => {
  pagination.value.page = page;
  fetchData();
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="less">
.table-wrapper {
  padding-top: 16px;
  
  .table-header {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  :deep(.arco-table-cell) {
    padding: 12px 16px;
  }
}
</style>
